﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>PickerBox帮助</title>
        <link href="css/help.css" rel="stylesheet" type="text/css" />
        <link href="css/SyntaxHighlighter.css" rel="stylesheet" type="text/css" />
        <link href="css/asyncbox.css" rel="stylesheet" type="text/css" />
        <link href="css/pickerbox.css" rel="stylesheet" type="text/css" />
        <script src="script/jquery-1.5.2.min.js" type="text/javascript"></script>
        <script src="script/pickerbox.js" type="text/javascript"></script>
        <script src="script/AsyncBox.v1.4.5.js" type="text/javascript"></script>
        
        
      <meta name="description" content="pickerbox简称采摘盒子,是基于Jquery的插件,同时也依赖了Ztree3.2,Easyui1.26,及AsyncBox1.4.5.主要为了解决选择多条件的数据" />
    <meta name="keywords" content="pickerbox 采摘盒子,jquery采摘盒子,jquery插件" />
    </head>
     <script type="text/javascript">
         $(document).ready(function () {

             $("#option").pickerbox({ title: "选择对象", ismultiple: true, height: "100px", width: "300px", text: "北京", value: "1"
             , pickergird: {
                 fieldtext: "attr1",
                 fieldvalue: "itemid"
             },
             onselected: function (p) {
                     alert("已选值为:"+p.value+" 已选文本为:"+p.text);
             }
             });
               
             $("#myinput").pickerbox({
                 title: "选择对象",
                 ismultiple: true,
                 height: "100px",
                 width: "800px",
                 text: "北京",
                 value: "1",
                 navindex: [0,2],
                 onselected: function(p) {
                     alert("已选值为:" + p.value + " 已选文本为:" + p.text);
                 }
             });
         });
    </script>
    <body>
        <br/>
        <div class="content" style="border-color:#CF9E9E">
            <div style="padding:10px">
                <h3>pickerbox 1.0</h3>
                <h4>介绍</h4>
                <div class="dp-highlighter">
                    pickerbox简称采摘盒子,是基于Jquery的插件,同时也依赖了Ztree3.2,Easyui1.26,及AsyncBox1.4.5.主要为了解决选择多条件的数据.
                    <br />
                    -封装主要插件复杂的使用,关心主要的常用使用.
                    <br />
                    -支持树,导航导向呈现数据.
                    <br />
                    -支持跨iframe获取数据.<br />
                    -灵活支持记录数据.<br />
                    -提供重要事件回调.<br />
                    -兼容IE8以上浏览器.<br />
                    <br />
                    由于多个插件集成,未能面面俱到,请谅解.<br />
                </div>
                <h4>下载</h4>
                <div class="dp-highlighter">
                    <a href="https://github.com/chenchangwen/Pickerbox" target="_blank">Pickerbox1.0</a>
                </div>
                    <br />
            </div>
        </div>
        <br/>
        <div class="content" style="border-color: #ADADAD">
            <div style="padding:10px">
              
                <h4>使用指南 1.调用pickerbox方法</h4>

                <div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-xml"><li class="alt"><span><span class="tag">&lt;select</span>&nbsp;<span class="attribute">id</span><span>=</span><span class="attribute-value">"option&quot;</span>&nbsp;multiple=<span class="attribute-value">"multiple&quot;</span><span class="tag">&gt;</span><span class="tag">&lt;/select&gt;</span>&nbsp;&nbsp;select元素务必把multiple=<span 
                                                                                                                                                                                                                                                                                                                                                                                                                                                             class="attribute-value">&quot;multiple&quot;</span><span class="tag">属性加上</span></span></li></ol></div><textarea class="html" name="code-pagination" style="display: none;">	&lt;div id="pp" style="background:#efefef;border:1px solid #ccc;"&gt;&lt;/div&gt;
</textarea>

                <div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="string">'#option&#39;</span>).pickerbox({&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;title:&quot;选择对象&quot;,&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;ismultiple:true,</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;height:&quot;100px&quot;,</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;width:&quot;800px&quot;,</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;text:&quot;北京&quot;,</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;value:&quot;1&quot;,</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;navindex:[],</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;pickergird:{ fieldtext: &quot;attr1&quot;, fieldvalue: &quot;itemid&quot; }</span></li>
                                                                                                <li class="">
                                                                                                    <span>});&nbsp;&nbsp;</span>
                                                                                                </li></ol></div>

                <h4>演示</h4>
                    <div class="dp-highlighter">
                        数据均是本地json数据,如果浏览器因安全问题无法读取,请用url后台数据返回.</div>
                <div class="dp-highlighter">
                    1.select元素</div>
                <div class="dp-highlighter">
                    <select id="option" multiple="multiple"></select>
                </div>
                       <div class="dp-highlighter">
                    2.input元素</div>
                  <div class="dp-highlighter">
                    <input id="myinput"></input>
                </div>
                <h4>属性</h4>
                <table class="doc-table">

                    <tbody><tr>

                               <th><strong>名称</strong></th>
                               <th><strong>类型</strong></th>
                               <th><strong>描述</strong></th>
                               <th><strong>默认值</strong></th>

                           </tr>

                        <tr>

                            <td>title（标题）</td>

                            <td>string</td>

                            <td>被弹出数据窗口的标题名称</td>



                            <td>选择对象</td>

                        </tr>

                        <tr>

                            <td>height（高度）</td>

                            <td>string</td>

                            <td>对象的高度</td>

                            <td>100%</td>

                        </tr>
                        <tr>
                            <td>width（宽度）</td>
                            <td>string</td>
                            <td>对象的宽度</td>
                            <td>100%</td>
                        </tr>
                        <tr>
                            <td>text（文本）</td>
                            <td>string</td>
                            <td>pickerbox的已选文本</td>
                            <td>空字符串</td>
                        </tr>
                        <tr>
                            <td>value（值）</td>
                            <td>string</td>
                            <td>pickerbox的已选值</td>
                            <td>空字符串</td>
                        </tr>
                        <tr>
                            <td>ismultiple（多选）</td>
                            <td>boolean</td>
                            <td>弹出数据窗口时的数据是否可以多选</td>
                            <td>true</td>
                        </tr>
                        <tr>
                            <td>navindex（导航索引）</td>
                            <td>array</td>
                            <td>对应显示数据窗口的菜单索引数组(从0开始,如果为null则全部显示)</td>
                            <td>null&nbsp;</td>
                        </tr>
                        <tr>
                            <td>pickerpath（路径）</td>
                            <td>string</td>
                            <td>路径(如果插件路径非一般根目录,要增加路径地址)</td>
                            <td>空字符串</td>
                        </tr>
                        <tr>
                            <td>parentid（父窗口id）</td>
                            <td>string</td>
                            <td>如果父窗口是iframe,必须设定</td>
                            <td>空字符串</td>
                        </tr>
                        <tr>
                            <td>ismultiple（多选）</td>
                            <td>boolean</td>
                            <td>弹出数据窗口时的数据是否可以多选</td>
                            <td>true</td>
                        </tr>
                        <tr>
                            <td>url（地址）</td>
                            <td>string</td>
                            <td>数据窗口的地址(含义与pickerpath一样)</td>
                            <td>空字符串</td>
                        </tr>
                    </tbody></table>

                <h4>属性对象</h4>
                <table class="doc-table">

                    <tbody><tr>
                               <th><strong>名称</strong></th>
                               <th>属性</th>
                               <th><strong>描述</strong></th>
                           </tr>

                        <tr>

                            <td><span>pickergird</span></td>

                            <td><span>fieldtext</span>, <span>fieldvalue</span></td>

                            <td>点击数据窗口行时,每行数据设定以下来取行数据.<br>

                                                       <span>fieldtext：文本<br />
                                                       fieldvalue：值</td>

                        </tr>
                    </tbody>
                </table>

                <h4>事件</h4>

                <table class="doc-table">

                    <tbody><tr>

                               <th><strong>名称</strong></th>
                               <th><strong>参数</strong></th>
                               <th><strong>描述</strong></th>



                           </tr>

                        <tr>

                            <td>onselected</td>

                            <td>callback</td>

                            <td>当在数据窗口点击确认时<br>

                                           <span>callback</span>.id： 当前对象的id<br>

                                                                            <span>callback</span>.value： 当前对象已选的值<br />
                                                                            <span>callback.text： 当前对象已选的文本</td>

                        </tr>

                    </tbody></table>



                <h4>方法</h4>
                <table class="doc-table">
                    <tbody><tr>
                               <th><strong>名称</strong></th>
                               <th><strong>参数</strong></th>
                               <th><strong>描述</strong></th>



                           </tr>

                        <tr>

                            <td>$.pickerbox.getCountById </td>

                            <td>string(根据对象id)</td>

                            <td>返回已选数量</td>

                        </tr>

                        <tr>

                            <td>$.pickerbox.getTextById</td>

                            <td>string(根据对象id)</td>

                            <td >返回已选文本。</td>

                        </tr>


                        <tr>

                            <td>$.pickerbox.getValueById</td>

                            <td>string(根据对象id)</td>

                            <td>返回已选值。</td>

                        </tr>
                    </tbody></table>
            </div>
        </div>
        <br/>
        <div  class="content" style="border-color:#FFC78E">
            <div style="padding:10px">
                
                <h4>使用指南 2.在index.html(数据载入页面)调用picker.build()方法 </h4>
                <div class="dp-highlighter">
                    开打index.html(数据页面)编辑,在脚本处调用picker.build(object)方法.
                </div>
                <div class="dp-highlighter"><div class="bar"><div class="tools"></div></div><ol start="1" class="dp-c"><li class="alt">
                                                                                                                           <span>var p={&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;datagrid:{</span></li>
                                                                                                <li class="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                                                    <span>columns: [[&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;{field: 
                                                                                                                                                           &#39;itemid&#39;, title: &#39;Item ID&#39;, width: 80, checkbox: true },</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                                                                                                                    {field: &#39;productid&#39;, title: &#39;Product ID&#39;, width: 120 },</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;{field: 
                                                                                                                    &#39;attr1&#39;, title: &#39;Attribute&#39;, width: 250 },</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                                                                                                                    ]], </span></li>
                                                                                                <li class="alt">&nbsp;&nbsp;&nbsp;&nbsp;<span>url: &quot;datagrid_data1.json&quot;,</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;pagination:true,</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;},</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;tag:{</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;columns:[[</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;{name: &quot;1号导航菜单&quot;, url: 
                                                                                                                    &quot;datagrid_data1.json&quot;},</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;{name: &quot;2号导航菜单&quot;, url: 
                                                                                                                    &quot;datagrid_data2.json&quot;},</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;{name: &quot;3号导航菜单&quot;, url: 
                                                                                                                    &quot;datagrid_data3.json&quot;}</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;}</span></li>
                                                                                                <li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;onSelectPage:funtion(pageNumber, 
                                                                                                    pageSize){}</span></li>
                                                                                                <li class="">
                                                                                                    <span>};&nbsp;</span></li>
                                                                                                <li class="alt"><span>picker.build(p);</span></li>
                                                                                            </ol>
                </div>
                <h4>属性对象(tag)</h4>
                <table class="doc-table">
                    <tbody>
                        <tr>

                            <th><strong>名称</strong> </th>
                            <th><strong>类型</strong></th>
                            <th><strong>描述</strong></th>
                            <th><strong>默认值</strong></th>

                        </tr>

                        <tr>
                            <td>columns（列）</td>
                            <td>array（数组）</td>
                            <td>数据表格列配置对象<br />
                                name:导航菜单的名称(string)。<br />
                                url:点击时请求数据的超链接地址(string)。</td>
                            <td>null</td>
                        </tr>
                          <tr>
                            <td>queryurl（超链接）</td>
                            <td>string</td>
                            <td>点击查询图标时所请求的超链接地址。</td>
                            <td>空字符串</td>
                        </tr>
                    </tbody></table>

                <h4>属性对象(datagrid)</h4>
                <table class="doc-table">

                    <tbody><tr>

                               <th><strong>名称</strong> </th>
                               <th><strong>类型</strong></th>
                               <th><strong>描述</strong></th>
                               <th><strong>默认值</strong></th>

                           </tr>
                        <tr>
                            <td>columns（列）</td>
                            <td>array（数组）</td>
                            <td>数据表格列配置对象<br />
                                field:数据显示的字段(string)。<br />
                                title:数据显示的标题(string)。<br />
                                width:宽度(int)。<br />
                                checkbox:该列是否显示checkbox(boolean)。</td>
                            <td>null</td>
                        </tr>
                        <tr>
                            <td>width（宽度）</td>
                            <td>int</td>
                            <td>对象的宽度</td>
                            <td>700</td>
                        </tr>
                        <tr>
                            <td>pagination（分页）</td>
                            <td>boolean</td>
                            <td>设置true将在数据表格底部显示分页工具栏。</td>
                            <td>true</td>
                        </tr>
                        <tr>
                            <td>url（超链接）</td>
                            <td>string</td>
                            <td>一个用以从远程站点请求数据的超链接地址。</td>
                            <td>空字符串</td>
                        </tr>
                        <tr>
                            <td>queryParams</td>
                            <td>object(对象)</td>
                            <td>作为请求url的参数<br />
                                键值对的对象如{name:&quot;test&quot;}</td>
                            <td>null</td>
                        </tr>
                    </tbody></table>
         
                <h4>方法</h4>
                <table class="doc-table">
                    <tbody><tr>
                               <th><strong>名称</strong></th>
                               <th><strong>参数</strong></th>
                               <th><strong>描述</strong></th>
                           </tr>
                        <tr>
                            <td>picker.build</td>
                            <td>p</td>
                            <td>参数p应该是一个包含对象属性datagrid,tag的一个对象.build会根据p来建立内容.</td>

                        </tr>
                        <tr>
                            <td>picker.load</td>
                            <td>opts</td>
                            <td>参数opts应该是一个包含对象属性columns,url的一个对象.load会根据opts来建立数据表格.</td>

                        </tr>
                    </tbody></table>
                <h4>列属性(columns)</h4>
                <div class="dp-highlighter">
                    数据表格的列是一个对象数组，即这个对象中的元素也是一个数组（js中数组是对象）。 对象数组中的每一个元素都是可配置的对象，每个可配置对象定义一个列。具体可以参考eaysui帮助。
                </div>
            </div>
        </div>
        
        <br/>
        
        <div  class="content" style="border-color:#CECEFF">
            <div style="padding:10px">
                
                <h4>使用指南 3.在iframe里使用.</h4>
                
                <div class="dp-highlighter">
                    调用pickerbox一个在页面,同时也嵌入在iframe.在firefox是通过的,ie则是不行的,建议不这样做.所以一般是iframe里面的,勿在同一个页面同时使用.
          
                </div>

                <div class="dp-highlighter">
                    <a href="pickerboxiframe.htm" target="_blank">去看看</a>
                </div>
                <!--                 <iframe src="pickerbox2.htm" width="500" id="myiframe" height="200px"frameborder="no" style="border: 1px solid #0066CC; border-radius: 5px 5px 5px 5px;overflow:hidden;"scrolling="no"></iframe>-->
            </div>
        
        </div>

        <br/>
        <div  class="content" style="border-color:	#66B3FF">
            <div style="padding:10px">
                
                <h4>使用指南 4.树(Ztree)控件的使用方法.</h4>
                
                <div class="dp-highlighter">
                    由于树可能相对更多操作性及逻辑性,插件未对其进行封装.具体请参考Ztree官网.
                </div>

                <div class="dp-highlighter">
                    <a href="http://www.ztree.me/v3/main.php" target="_blank">去看看</a>
                </div>
                <!--                 <iframe src="pickerbox2.htm" width="500" id="myiframe" height="200px"frameborder="no" style="border: 1px solid #0066CC; border-radius: 5px 5px 5px 5px;overflow:hidden;"scrolling="no"></iframe>-->
            </div>
        
        </div>
        <br/>
         <div  class="content" style="border-color:	#8080C0">
            <div style="padding:10px">
                <h4>使用指南 5.分页参数.</h4>
                 <div class="dp-highlighter">
                     分页的数量超过当页设定的数量时,分页按钮即启用.当点[下一页](等翻页按钮)时.会发送参数到后台(地址是当前加载的url).所以,后台应根据这参数做出相应处理返回合理的JSON数据即可.</div>
                <table class="doc-table">
                    <tbody><tr>
                               <th><strong>名称</strong></th>
                               <th><strong>描述</strong></th>
                           </tr>
                        <tr>
                            <td>pageNumber</td>
                            <td>下一页的页码</td>
                        </tr>
                        <tr>
                            <td>pageSize</td>
                            <td>下一页的显示记录数</td>
                        </tr>
                        <tr>
                            <td>currentPage</td>
                            <td>当前页码</td>
                        </tr>
                        <tr>
                            <td>rows</td>
                            <td>行数</td>
                        </tr>
                    </tbody></table>
                    </div>
        </div>
        <br/>
        
        <div  class="content" style="border-color:	#B87070">
            <div style="padding:10px">
                <h4>FAQ</h4>
                <div class="dp-highlighter">
                    1.走样看不到图片?<br/>
                    &nbsp; 一般是路径设置问题,更改相关css文件的路径即可.<br/>
                    2.点击"选择对象"没打开数据窗口?<br/>
                    &nbsp; 同上,更改路径.<br/>
                    3.怕重复index.html文件,可否修改index.html文件?<br/>
                    &nbsp; 可以,如果修改了文件名,请在调用pickerbox方法时加上url路径.<br/>
                    4.pickerbox只为一种数据源服务?<br/>
                    &nbsp; 由于是弹窗式的,不方便在pickerbox调用处一次设定.对于数据表格的设定,需在index.html页面进行脚本编辑.所以如果针对多种数据原为多个页面服务的话请自行写<br/>
                    &nbsp; 逻辑判断.
                </div>
            </div>
        </div>
        <br/>

    </body>
</html>

